<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG转图片工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>SVG转图片工具</h1>
            <p>点击按钮启动或停止Web服务</p>
        </div>
        
        <div class="status-section">
            <div class="status-indicator">
                <span class="status-dot" id="statusDot"></span>
                <span class="status-text" id="statusText">未运行</span>
            </div>
        </div>
        
        <div class="button-section">
            <button id="startBtn" class="btn btn-primary">
                <span class="btn-icon">▶</span>
                启动服务
            </button>
            <button id="stopBtn" class="btn btn-secondary" disabled>
                <span class="btn-icon">⏹</span>
                停止服务
            </button>
        </div>
        
        <div class="info-section">
            <div class="info-item">
                <strong>服务地址:</strong>
                <span id="serverUrl">http://localhost:3000</span>
            </div>
            <div class="info-item">
                <strong>功能:</strong>
                <span>SVG文件转PNG/JPEG图片</span>
            </div>
        </div>
        
        <div class="message-section">
            <div id="message" class="message"></div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html> 